<template>
  <div class="bigHigh_box">
      <TopOne :obj="obj" :getYao="getYao" :datalist="datalist" />
      <div class="customTodo_body">
          <TopTwo :todoButton="todoButton" />
          <Table :columns="columns" :data="store.tableDataSix" @change="onChange"   :operate="operate" style="width: 100%;">
    </Table>
      </div>









      <!-- 导出的弹框 -->

<el-dialog
  v-model="dialogVisible"
  title="导出"
  width="500"
  :before-close="handleClose"
  modal="false"
  draggable="true"
>
  
<p class="box_center">
  <el-button type="primary"  size="large" @click="deduced"  class="btn">下载导出文件</el-button>
  <el-button  size="large"  class="btn"  >导出文件管理</el-button>
</p>
  <template #footer>
    <div class="dialog-footer">
      <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
      <!-- <el-button type="primary" @click="dialogVisible = false">
        Confirm
      </el-button> -->
    </div>
  </template>
</el-dialog>






<!-- 导入的弹框 -->




<!-- <el-upload
    action=""
    :auto-upload="false"
    :on-change="uploadChange"
    :limit="1"
  >
    <el-button type="primary">上传Excel</el-button>
  </el-upload> -->



<el-dialog
  v-model="dialogVisible1"
  title="导入"
  width="600"
  modal="false"
  draggable="true"
  :before-close="handleClose"
>


<div class="Box_file">
  <div class="user_logo"></div>
  <div>
      <p class="upload">上传填好的信息表</p>
  <p class="content">文件后缀名必须为xls 或xlsx (即Excel格式),文件大小不得大于10M,最多支持导入3000条数据</p>
  <p class="btnS">
      <el-upload
    action=""
    :auto-upload="false"
    :on-change="uploadChange"
    :limit="1"
  >
    <button>上传Excel</button>
  </el-upload>
  </p>
  </div>


 

</div>
<div class="tips">
  <span class="iconfont" id="logo">&#xe63f;</span>
  <div>
    <p class="ttt">特别提示</p>
    <p class="ytt">导入过程中如发现同名客户，且对该客户数据有更新权限，则更新这条客户数据</p>
  </div>
</div>

  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogVisible1 = false">取消</el-button>
      <el-button type="primary" @click="dialogVisible1 = false">
        确定
      </el-button>
    </div>
  </template>
</el-dialog>







<!-- 添加弹框 -->

<el-dialog
  v-model="dialogVisible2"
  title="发起工单"
  width="500"
  :before-close="handleClose"
>
  <div class="box_inp">
    <p>工单编号:
      <el-input v-model="input" style="width: 240px" placeholder="输入工单编号" />
    </p>
    <p>工单标题:
      <el-input v-model="input1" style="width: 240px" placeholder="输入工单标题" />
    </p>
    <p>工单类型:
      <el-input v-model="input2" style="width: 240px" placeholder="输入工单类型" />
    </p>
    <p>处理人员:
      <el-input v-model="input3" style="width: 240px" placeholder="输入处理人员" />
    </p>
    <p>发起时间:
      <el-input v-model="input4" style="width: 240px" placeholder="输入发起时间" />
    </p>
    <p>工单状态:
      <el-input v-model="input5" style="width: 240px" placeholder="输入工单状态" />
    </p>
    <p>紧急程度:
      <el-input v-model="input6" style="width: 240px" placeholder="输入紧急程度" />
    </p>
    <p>批注:
      <el-input v-model="input7" style="width: 240px" placeholder="输入备注" />
    </p>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogVisible2 = false">取消</el-button>
      <el-button type="primary" @click="addS">
        确定
      </el-button>
    </div>
  </template>
</el-dialog>









  </div>
</template>

<script setup lang="ts">
import TopOne from '../../components/topOne.vue'
import TopTwo from '../../components/topTwo.vue';
import Table from "@/components/newTable.vue"
import { ElMessageBox } from 'element-plus'
import axios from 'axios';
import type { TableColumnType } from 'ant-design-vue';
import {useStore} from "../../store/index.ts"
import { onMounted, ref,computed } from 'vue';
import * as XLSX from 'xlsx' // Vue3 版本
import { useRouter } from 'vue-router';
// import {useRouter} from 'vue-router'
// 传给第一个input框的数据



const input=ref('')
const input1=ref('')
const input2=ref('')
const input3=ref('')
const input4=ref('')
const input5=ref('')
const input6=ref('')
const input7=ref('')





const router=useRouter()



const operate = ref([
    {
        icon: '',           
        title: '详情',
        click: (_key: any) => {detailOne(_key) }
    },
    {
        icon: '',
        title: '删除',
        // 括号中的为整列信息 可以切换成别的
        click: (_key: any) => {delOne(_key) }
    }
])


const delOne=(key)=>{
   axios.delete(`http://localhost:8080/ticket/${key.id}`)
  // console.log(key)
   store.getTicketS()
}



const detailOne=(key)=>{
  router.push({path:'/home/ticket/detail',query:key})
}



const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
const dialogVisible3 = ref(false)



const addS=()=>{
console.log("11")
dialogVisible2.value = false

axios.post("http://localhost:8080/ticket",
{workNum:input.value,workTit:input1.value,
  workType:input2.value,subPerson:input3.value,
  subTime:input4.value,current_status:input5.value,
  urgent:input6.value,key:input7.value
})
store.getTicketS()
}




const readFile = (file: any) => {
return new Promise((resolve) => {
  let reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = (ev) => {
    resolve(ev.target?.result);
  };
});
};
const uploadChange = async (file: any) => {
let dataBinary = await readFile(file.raw);
let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true });
let workSheet = workBook.Sheets[workBook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(workSheet);
console.log("excel数据", data);
};















const store=useStore()

onMounted(()=>{
store.getTicketS()
})





const columns = computed<TableColumnType[]>(() => {
return [

  {
    title: '工单编号',
    dataIndex: 'workNum',
    key: 'workNum',
  },{
    title: '工单标题',
    dataIndex: 'workTit',
    key: 'workTit',
  },{
    title: '工单类型',
    dataIndex: 'workType',
    key: 'workType',
  },{
    title: '处理人员',
    dataIndex: 'subPerson',
    key: 'subPerson',
  },{
    title: '提交时间',
    dataIndex: 'subTime',
    key: 'subTime',
  },{
    title: '审批状态',
    dataIndex: 'current_status',
    key: 'current_status',
  },{
    title: '紧急程度',
    dataIndex: 'urgent',
    key: 'urgent',
  },{
    title: '操作',
    dataIndex: 'differenceInDays',
    key: 'differenceInDays',
    width: '15%',
  }
];
});





const handleClose = (done: () => void) => {
ElMessageBox.confirm('确定取消吗？')
  .then(() => {
    done()
  })
  .catch(() => {
    // catch error
  })
}









const obj = {
  // 第一个输入框
  inputOne: {
      done: true,
      tishi: '搜索关键词',
  },
  // 后面倒数第二个带小人的输入框
  inputTwo: {
      done: true,
      tishi: "提交人员"
  },
  // 日历输入框
  inputThere: {
      done: true,
      tishi: '提交时间'
  },
  // 3个下拉列表
  selectOne: {
      done: true,
      tishi: '审批状态',
      todoDone: [
          {
              value: '已通过',
              label: '已通过',
          },
          {
              value: '待审批',
              label: '待审批',
          }
      ]
  },
  selectTwo: {
      done: true,
      tishi: '请假类型',
      todoDone: [
          {
              value: '事假',
              label: '事假',
          },
          {
              value: '病假',
              label: '病假',
          },

      ]
  },
  selectThere: {
      done: false,
      tishi: '客户星级',
      todoDone: [
          {
              label: '⭐',
              value: '1',
          },
          {
              label: '⭐⭐',
              value: '2',
          },
          {
              label: '⭐⭐⭐',
              value: '3',
          },
      ]
  }
}
// 获取到input的数据
function getYao(value: any) {
  if (value.inputOne) {
      tableData.value = tableData.value.filter((item: any) => {
          if (item.iSwhy.indexOf(value.inputOne) != -1) {
              return item
          }
      })
      
  }
  if (value.selectOne) {
      tableData.value = tableData.value.filter((item: any) => {
          if (item.done.indexOf(value.selectOne) != -1) {
              return item
          }
      })
  }
  console.log(value, '头部请求获取到的');
}
// 传给一排按钮的数据+方法
const todoButton = [
  { id: 1, name: '➕︎添加', fn: addOne },
  { id: 2, name: '⬇导入', fn: daoruAlert},
  { id: 3, name: '⬆导出' , fn:deducedAlert},
  // {id:4,name:'🗊新建任务'},
  // {id:5,name:'🗘转移客户'},
  // {id:6,name:'🕴移入公海'},
  // {id:7,name:'⛙合并客户'},
  // {id:8,name:'🖊︎批量编辑'},
]
// 给按钮绑定事件
function addOne() {
dialogVisible2.value=true
  console.log("添加");
}

function daoruAlert(){
  dialogVisible1.value= true
}




function deducedAlert(){
  dialogVisible.value = true

}


function deduced(){
  dialogVisible.value = false
  const data = XLSX.utils.json_to_sheet(store.tableDataSix)
// 创建工作簿
const wb = XLSX.utils.book_new()
// 将工作表放入工作簿中
XLSX.utils.book_append_sheet(wb, data, 'data')
// 生成文件并下载
XLSX.writeFile(wb, 'test.xlsx')
console.log('完成导出')
}







</script>

<style scoped>
.ttt{
  font-size: 14px;
  color: black;
}
.ytt{
  color: rgb(153, 153, 153);
  font-size: 12px;
}
#logo>p{
  line-height: 30px;
}
#logo{
  font-size: 36px;
}
.tips{
  display: flex;
  justify-content:space-evenly;
  align-items: center;
  width: 560px;
  height: 60px;
  background-color: rgb(255, 245, 230);
  margin-top: 15px;
}
.box_inp>p{
margin-top: 10px;
}
.btnS{
 margin-left: 8px;
 margin-top: 12px;
}
.content{
  color: gray;
  font-size: 10px;
  margin-left: 8px;
  margin-top: 12px;
}
.upload{
  font-weight: bold;
  margin-left: 8px;
  margin-top: 12px;
}
.user_logo{
  width:110px;
  height: 100px;
  background-color: gray;
}
.Box_file{
  width: 580px;
  height: 100px;
  background-color: white;
  display: flex;
}
.btn{
  width: 180px;
}
*{
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.box_center{
  text-align: center;
  margin-top:40px;
}
</style>